<template>
  <div>
    <div class="grid grid-cols-4 md:gap-4 !md:m-4">
      <StatisticCard
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_apdex"
        :service-name="serviceName"
      />
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        :service-name="serviceName"
        condition-name="service_resp_time"
      />
      <StatisticCard
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_sla"
        :service-name="serviceName"
      />
      <StatisticCard
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_cpm"
        :service-name="serviceName"
      />
    </div>
    <div class="grid grid-cols-4 md:gap-4 !md:m-4">
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_apdex"
        :service-name="serviceName"
        :params="duration"
      />
      <LabelLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        :service-name="serviceName"
        condition-name="service_percentile"
        :params="duration"
      />
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_sla"
        :service-name="serviceName"
        :params="duration"
      />
      <SingleLineChart
        :page="pageName"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        condition-name="service_cpm"
        :service-name="serviceName"
        :params="duration"
      />
    </div>
    <div class="!md:m-4 !md:mb-0">
      <CardGrid
        page="service"
        :col-num="3"
        :start="props.start"
        :end="props.end"
        :step="props.step"
        :service-name="serviceName"
        :condition-list="serviceConditions"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import CardGrid from '../cards/CardGrid.vue';
import StatisticCard from '../cards/StatisticCard.vue';
import SingleLineChart from '../../../common/SingleLineChart.vue';
import LabelLineChart from '../../../common/LabelLineChart.vue';

export default defineComponent({
  components: {
    CardGrid,
    StatisticCard,
    SingleLineChart,
    LabelLineChart,
  },
  props: {
    start: String,
    end: String,
    step: String,
    serviceName: String,
  },
  setup(props) {
    const pageName = ref('service');

    const serviceName = ref();

    const duration = ref();

    const serviceApdexCondition = ref('service_apdex');

    const serviceConditions = ref([
      'service_instance_cpm',
      'service_instance_resp_time',
      'service_instance_sla',
    ]);

    watch(
      () => [props.start, props.end, props.step, props.serviceName],
      (val) => {
        serviceName.value = val[3];
      },
      { immediate: true, deep: true }
    );

    return {
      props,
      pageName,
      duration,
      serviceApdexCondition,
      serviceConditions,
    };
  },
});
</script>
